<template>
  <div class="quill-editor"
    ref="editorRef"
    @click.stop="onEditorClick">
  </div>
</template>

<script setup lang="ts">
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.bubble.css";
import "quill/dist/quill.snow.css";
import { onMounted, ref, onBeforeUnmount, computed } from "vue";
import { toolbar } from "./options";
// 字体
// const fonts = [
//   "SimSun",
//   "SimHei",
//   "Microsoft-YaHei",
//   "KaiTi",
//   "FangSong",
//   "Arial",
//   "Times-New-Roman",
//   "sans-serif",
// ];
// const Font = Quill.import("formats/font");
// Font.whitelist = fonts; //将字体加入到白名单
// Quill.register(Font, true);
const props = withDefaults(
  defineProps<{
    readOnly: boolean;
    theme: string;
    placeholder: string;
    content: string;
  }>(),
  {
    readOnly: false,
    theme: "snow",
    placeholder: "请输入内容．．．",
    content: "",
  }
);
const emit = defineEmits(["content-change"]);
const editor: any = () => {};
const editorRef = ref(null);
// const getContent = computed({() => editor.value.container.firstChild.innerHTML});
const onEditorClick = () => {
  if (props.readOnly) return;
  editor.value.focus();
};
const setContent = (content: string) => {
  editor.value.clipboard.dangerouslyPasteHTML(content);
  editor.value.setSelection(editor.value.getLength(), 0);
  return editor.value;
};
const initQuill = () => {
  editor.value = new Quill(editorRef.value as any, {
    modules: {
      formula: false,
      syntax: false,
      history: {
        delay: 1000,
        userOnly: true,
      },
      toolbar: props.readOnly ? [] : toolbar,
    },
    theme: props.theme,
    placeholder: props.placeholder,
    readOnly: props.readOnly,
  });
  setContent(props.content);
  editor.value.on("text-change", async (delta: any) => {
    // 上传路径替换
    // const content = await contentBaseImg(getContent());
    let content = editor.value.container.firstChild.innerHTML;
    emit("content-change", content);
  });
};
onMounted(() => {
  initQuill();
});
onBeforeUnmount(() => {
  editorRef.value = null;
});
</script>

<style lang="less" scoped>
@import "./font.css";
</style>
